<template>
  <PCard :isCardBorder="true" :shadow="'always'" :isHeadBottomBorder="false" :bodyStyle="{ width: '100%' }"
    :loading="true">
    <PCard :isCardBorder="true" :shadow="'never'" :isHeadBottomBorder="true" :bodyStyle="{ width: '100%' }">
      <PageForm ref="MailingInformation" :formKey="formKey_qyxx"
        :formEvent="(...args) => { formEvent('MailingInformation', ...args) }" :formConfig="pageFormDefaultConfig"
        :itemList="formList"></PageForm>
    </PCard>
    <PCard :isCardBorder="true" :shadow="'never'" :isHeadBottomBorder="true" :bodyStyle="{ width: '100%' }"
      style="margin: 30px 0;">
      <a-row :key="'payment-info-row-' + index" :gutter="16"
        :class="['gutter-row', item.showBorderBottom === true ? 'show-border-bottom' : ''].join(' ')"
        v-for="(item, index) in paymentInfo.dataList">
        <a-col class="gutter-col" :span="12">
          <div class="gutter-box-1">
            {{ item.label }}
          </div>
        </a-col>
        <a-col class="gutter-col" :span="12">
          <div :class="['gutter-box-2', item.amount.isAction ? 'action' : 'not-action'].join(' ')"
            @click="paymentEvent(item)">
            {{ item.amount.num + ' ' + item.amount.unit }}
            <a-icon type="right" style="margin: 0 5px;" v-if="item.amount.isAction" />
          </div>
        </a-col>
      </a-row>
    </PCard>
    <a-button type="primary" block @click="toPayEvent">
      去支付
    </a-button>
  </PCard>
</template>

<script>
import UUID from '@/utils/uuid'
import * as Utils from '@/utils/util'
import getDataForDB from '@/api/qsbBusinessManagement'
const formKey_qyxx = UUID()
const pageFormConfig_ = {
  columnCount: 3,
  layout: 'vertical',
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
}
const formItemConfig = {
  labelAlign: 'left',
  labelCol: { xxl: 6, xl: 5 },
  wrapperCol: { xxl: 18, xl: 19 },
}

const lqfsData = [
  { enName: 'key1', cnName: '一年(延长至--)' },
  { enName: 'key2', cnName: '两年(延长至--)' },
]

export default {
  name: 'ServiceRenew',
  props: {
    formInfo: {},
    // 关闭时间
    coloseEvent: { type: Function }
  },
  data() {
    return {
      formKey_qyxx,
      pageFormDefaultConfig: pageFormConfig_,
      formList: [
        { enName: 'entName', cnName: '续费企业', type: 'label', value: '年度开票额度', monoRow: true, formItemAttr: { ...formItemConfig } },
        { enName: 'entId1', cnName: '原截止日期', type: 'label', value: '2023-02-28', monoRow: true, formItemAttr: { ...formItemConfig } },
        { enName: 'entId2', cnName: '延长期限', type: 'radioGroup', value: 'key1', isChangeEvent: true, optionList: lqfsData, monoRow: true, formItemAttr: { ...formItemConfig } },

      ],
      paymentInfo: {
        dataList: [
          { label: '包年服务费', showBorderBottom: true, amount: { num: '0', unit: '元', color: '', isAction: false }, },
          // { label: '红包' , showBorderBottom:true, amount: { num:'-200', unit:'元', color:'', isAction: true},},
          { label: '合计支付', showBorderBottom: false, amount: { num: '0', unit: '元', color: '', isAction: false }, },
        ]
      },
      fee: 0,
      count: 1,
    }
  },
  watch: {
    formInfo: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          // this.formList[0].value = val['entName'] || '-----'
        }
        // console.log('formConfig watch ==>',val);
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    console.log(this);
    this.init()
  },
  methods: {
    formEvent(formName, type, data) {
      // qyxxForm textEvent 服务续费
      // qyxxForm textEvent 下载核定通知书
      // console.log('enterpriseDetails formEvent===>', this, formName, type, data);
      if (type === 'update') {
        //entId2  entId2 update  values count
        const tempCountKey = {
          key1: 1,
          key2: 2,
        }
        this.count = tempCountKey[data.values.entId2]

        this.paymentInfo.dataList[1].amount.num = this.count * this.fee
      }
    },
    btnEvent() {
      this.$message.info('需要对接接口')
    },
    paymentEvent(item) {
      const { amount } = item
      if (amount.isAction) {
        console.log('支付事件');
        this.$message.info('此功能尚在开发')
      }
    },
    toPayEvent() {
      const param = { entId: this.formInfo.entId, renewYear: this.count }
      getDataForDB('企业服务续费', param).then(res => {
        console.log('企业服务续费===>', res);
        if (res.code == 200) {
          const key = "ServiceRenew"
          Utils.Storage.set(key,{orderNo:[res.result]})
          this.$message.success('订单创建成功，将进入支付...')
          this.$router.push({
            path: '/myAccount/accountManage',
            query: {
              po: key
            }
          });
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    init() {
      const param = {
        entId: this.formInfo.entId
      }
      console.log(param);
      getDataForDB('获取续费信息', param).then(res => {
        if (res.code == 200) {
          this.formList[0].value = res.result.entName
          this.formList[1].value = res.result.serviceEnd
          this.formList[2].optionList[0].cnName = `一年(${res.result.oneYearDate})`
          this.formList[2].optionList[1].cnName = `两年(${res.result.towYearDate})`
          // Utils.conversionElement
          this.paymentInfo.dataList[0].amount.num = this.fee = Utils.conversionElement(res.result.fee)
          this.paymentInfo.dataList[1].amount.num = this.count * this.fee
        }
        // console.log('获取续费信息 ===>',res);
      })
    }
  }
}
</script>

<style lang="less">
.gutter-row {
  margin: 10px 0 !important;
  padding: 10px 5px;

  .gutter-col {
    .gutter-box-1 {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .gutter-box-2 {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      &.action {
        cursor: pointer;
      }

      &.not-action {
        padding-right: 25px;
      }
    }
  }

  &.show-border-bottom {
    border-bottom: 1px solid #ccc
  }
}
</style>
